<!-- 详情 -->
<template>
  <PageMain>
    <pageBack />
    <div v-if="detailData.type === 'PERSON'" class="brw pb-24px pt-24px firstItem">
      <div class="baseInfo">
        <div class="flex">
          <descriptions :data="baseInfoData" :column="3" />
          <el-button type="primary" icon="Edit" @click="editFn">编辑</el-button>
        </div>
      </div>
    </div>
    <div v-if="detailData.type === 'COMPANY'">
      <div class="brw pb-24px pt-24px firstItem">
        <div class="use-title-icon">服务类型</div>
        <div class="baseInfo">
          <div class="flex">
            <div class="photo">
              <useImage class="img" :src="detailData.companyImg"></useImage>
            </div>
            <descriptions :data="baseInfoData" :column="3" />
            <el-button type="primary" icon="Edit" @click="editFn">编辑</el-button>
          </div>
          <div class="info">
            <div class="title">企业详情</div>
            <div class="contact">{{ detailData.companyDesc }}</div>
          </div>
        </div>
      </div>

      <div class="brw pb-24px pt-24px mt-12px" v-if="detailData.categoryCodes.includes('OVERSEAS_WAREHOUSE')">
        <div class="use-title-icon">海外仓</div>
        <div class="warehouseInfo">
          <descriptions :data="warehouseInfoData" :column="3" />

          <div class="warehouseList">
            <div class="title">海外仓信息</div>
            <ul>
              <li v-for="(item, index) in detailData.companyWarehouseList" :key="index">
                <useImage class="img" :src="item.warehouseImg"></useImage>
                <div class="name">
                  <span>{{ item.warehouseName }}</span>
                  <span>{{ item.warehouseArea }}㎡</span>
                </div>
                <div class="address">
                  <i class="iconfont icon-address"></i>
                  <p>地址：{{ item.warehouseAddress }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="brw pb-24px pt-24px mt-16px" v-if="detailData.categoryCodes.includes('SPECIAL_LINE')">
        <div class="use-title-icon">专线</div>
        <descriptions :data="railwayLineData" :column="3" />
        <div class="title mt-6px font-600">专线服务</div>
        <div class="railway-line">
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon1.png" />
            </div>
            <div>包裹限重：{{ detailData.packageWeightMin }}-{{ detailData.packageWeightMax }}kg</div>
          </div>
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon2.png" />
            </div>
            <div>尺寸限制：{{ detailData.packageLength }}*{{ detailData.packageWidth }}*{{ detailData.packageHeight }}</div>
          </div>
          <!-- <div class="item">
          <div class="img">
            <img src="@/assets/images/icon3.png" />
          </div>
          <div>走货属性： 带电商品、液体、普货。</div>
        </div> -->
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon4.png" />
            </div>
            <div>揽货范围： {{ detailData.deliveryCityNames }}</div>
          </div>
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon5.png" />
            </div>
            <div class="content">申报要求：{{ detailData.declareDesc }}</div>
          </div>
        </div>
      </div>

      <div class="brw pb-6px pt-24px mt-16px" v-if="detailData.categoryCodes.includes('SERVICE_PROVIDER')">
        <div class="use-title-icon">服务商</div>
        <descriptions :data="serverData" :column="3" />
      </div>
    </div>
  </PageMain>
</template>

<script setup>
import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils";
import { companyScaleEnum } from "@/utils/dict";
import api from "@/api";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const baseInfoData = ref();

const warehouseInfoData = ref([]);

const railwayLineData = ref([]);

const serverData = ref([]);

const detailData = ref({});
const companyServiceList = ref([]);
const getDetail = () => {
  api.get(`/user/detail/${route.query.id}`).then((res) => {
    if (res.type === "COMPANY") {
      if (res.userCompanyDetailVO.companyServiceList.length === 0) {
        ElMessage({
          type: "warning",
          message: `请先编辑!`,
        });
        return;
      }
      detailData.value = res.userCompanyDetailVO;
      detailData.value.type = res.type;
      detailData.value.categoryCodes = detailData.value.categoryCodes.split(",")
      companyServiceList.value = companyServiceListSet(res.userCompanyDetailVO.companyServiceList);

      const serviceType = [];
      detailData.value.categoryCodes.forEach((key) => {
        serviceType.push(companyServiceList.value[key].categoryName);
      });

      baseInfoData.value = [
        { label: "注册类型", value: "企业" },
        { label: "企业名称", value: detailData.value.companyName },
        { label: "企业类型", value: serviceType.join(",") },
        { label: "企业规模", value: filterEnum(detailData.value.companyScale, companyScaleEnum) },
        { label: "联系人", value: detailData.value.contactName },
        { label: "联系电话", value: detailData.value.cantactPhone },
      ];

      if (res.userCompanyDetailVO.companyServiceList.length > 0) {
        companyServiceList.value.OVERSEAS_WAREHOUSE?.serviceItemTypeVO.forEach((item) => {
          warehouseInfoData.value.push({
            label: item.name,
            value: item.serviceItemList.map((it) => it.name).join(","),
          });
        });
        companyServiceList.value.SPECIAL_LINE?.serviceItemTypeVO.forEach((item) => {
          railwayLineData.value.push({
            label: item.name,
            value: item.serviceItemList.map((it) => it.name).join(","),
          });
        });
        companyServiceList.value.SERVICE_PROVIDER?.serviceItemTypeVO.forEach((item) => {
          serverData.value.push({ label: item.name, value: item.serviceItemList.map((it) => it.name).join(","), span: 3 });
        });
      }
    } else {
      detailData.value = res;
      detailData.value.type = res.type;
      baseInfoData.value = [
        { label: "联系人", value: detailData.value.contactName },
        { label: "联系电话", value: detailData.value.phone },
      ];
    }
  });
};
// 将接口数据转为可用结构
const companyServiceListSet = (metadata) => {
  const list = JSON.parse(JSON.stringify(metadata));
  const staging = {};
  for (let index = 0; index < list.length; index++) {
    const item = list[index];

    if (!staging[item.categoryCode]) {
      staging[item.categoryCode] = {
        categoryCode: item.categoryCode,
        categoryName: item.categoryName,
        serviceItemTypeVO: [item.serviceItemTypeVO],
      };
    } else {
      staging[item.categoryCode].serviceItemTypeVO.push(item.serviceItemTypeVO);
    }
  }
  return staging;
};

// 编辑用户信息
const editFn = () => {
  router.push({
    path: "/users/edit",
    query: { id: route.query.id },
  });
};
onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss">
.page-main {
  background: none;
}
.firstItem {
  border-radius: 0 0 8px 8px;
}
.baseInfo {
  .photo {
    width: 154px;
    height: 104px;
    margin-right: 40px;
    border-radius: 4px;
    overflow: hidden;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    .title {
      line-height: 20px;
      color: var(--use-color-info-light-3);
      padding-bottom: 4px;
    }

    .contact {
      line-height: 22px;
    }
  }
}

.tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  span {
    background: #f0f2f9;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    padding: 0 12px;
  }
}

.companyDescribe {
  p {
    text-indent: 2em;
  }
}

.warehouseList {
  .title {
    line-height: 20px;
    color: var(--use-color-info-light-3);
    padding-bottom: 4px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  li {
    width: 292px;
    padding: 12px;
    border: 1px solid var(--use-color-line);
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      border-color: var(--use-color-info);
    }

    .img {
      width: 266px;
      height: 144px;
      border-radius: 4px;
    }

    .name {
      line-height: 24px;
      padding: 12px 0;
      display: flex;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
        }

        &:nth-child(2) {
          font-size: 14px;
        }
      }
    }

    .address {
      display: flex;

      .iconfont {
        margin-right: 8px;
      }

      line-height: 22px;
    }
  }
}

.railway-line {
  .item {
    margin: 13px 0;
    line-height: 22px;
    display: flex;
    align-items: center;

    &:last-of-type {
      margin-bottom: 0;
    }

    .img {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 12px;
      border: 1px solid var(--use-color-line);
      border-radius: 32px;

      img {
        width: 18px;
        height: 18px;
      }
    }

    .content {
      flex: 1;
    }
  }
}
</style>
